<template>
    <div>
        <div class="filter-container">
            <el-form label-position="left" :inline="true" >
                <el-form-item class="filter-item" label="Method">
                    <el-select v-model="search.method" style="width: 100px;">
                        <el-option label="GET" value="GET"></el-option>
                        <el-option label="POST" value="POST"></el-option>
                        <el-option label="PUT" value="PUT"></el-option>
                        <el-option label="DELETE" value="DELETE"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Path">
                    <el-input class="filter-item" clearable v-model="search.path" style="width: 200px;" placeholder="支持模糊匹配"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input class="filter-item" clearable v-model="search.username" style="width: 100px;"></el-input>
                </el-form-item>
                <el-form-item label="IP">
                    <el-input class="filter-item" clearable v-model="search.ip" style="width: 140px;"></el-input>
                </el-form-item>
                <el-form-item label="日期">
                    <picker-datetime-range v-model="search.created_at"></picker-datetime-range>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="pageNo = 1;handleSearch()">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>

        <vxe-table
            :loading="loading"
            :data="tableData"
            ref="xTable"
            highlight-hover-row
            style="width: 100%"
            class="text-center"
            :max-height="maxHeight">
            <vxe-table-column title="操作时间" field="created_at" width="140"/>
            <vxe-table-column title="User" field="manager.name" width="80"/>
            <vxe-table-column title="Method" field="method" width="80"/>
            <vxe-table-column title="IP" field="ip" width="140"/>
            <vxe-table-column title="Path" field="path" min-width="180"/>
            <vxe-table-column title="参数" field="input" min-width="600">
                <template slot-scope="scope">
                    <el-popover
                        placement="top-start"
                        width="500"
                        trigger="click"
                        :content="scope.row.input">
                        <el-link slot="reference">{{ scope.row.input.substr(0, 100) }}</el-link>
                    </el-popover>
                </template>
            </vxe-table-column>
        </vxe-table>
        <el-pagination
            class="pull-right clearfix"
            background
            :current-page.sync="pageNo"
            :page-sizes="pageOptions.pageSizesList"
            :page-size="pageSize"
            :layout="pageOptions.layout"
            :total="totalDataNumber"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>

    </div>
</template>

<script>

export default {
    data() {
        return {
            search: {
                username: '',
                path:'',
                method:'',
                ip:'',
                created_at:[],
            },
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 20,
            totalDataNumber: 0,
            pageOptions: this.$store.state.backend.pageOptions,
            form: {
                data: {},
                show: false,
            }
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight - 220;
        },
    },
    methods: {
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });
            this.$store.dispatch('managerLogs/Lists', filter).then(res => {
                this.tableData = res.data.data;
                this.totalDataNumber = res.data.meta.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.handleSearch();
        },
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>
.el-form-item {
    margin-bottom: 0 !important;
}
</style>
